import React, { useEffect, useState } from 'react'
import ShowDrawer from '@/components/ShowDrawer'
import {
    Form,
    Input,
    InputNumber,
    Popover,
    Radio,
    Select,
    TreeSelect,
    message
} from 'antd';
import { rules } from './rules'
import { IMenu } from '../types';
import { menuTypes, isSuperTypes } from '../dictionary'
import IconSvg from "@/components/iconSvg";
import { IIconList, getIconList, getMenuList } from '@/utils/findViews';
import { addInfo, updateInfo } from '@/api/system/menu'
const { Option } = Select;

const menuList = getMenuList();

export default function Info(props: any) {
    let { info,list } = props;
    let fieldNames = {
        label: 'menuName',
        value: 'menuId',
        children: 'children',
    }
    //初始化表单
    let initForm = {
        menuName: '',
        menuType: 'M',
        parentId: undefined,
        icon: '',
        path: undefined,
        isUniq: '1',
        orderNum: 0,
        comments: ''
    }
    const [form] = Form.useForm<IMenu>();
    const [infoForm, setInfoForm] = useState<IMenu>({ ...initForm, ...info });
    const [treeData, setTreeData] = useState<Array<IMenu>>([]);

    useEffect(() => {
        dealMenuList(list)
    }, [])

    //处理菜单级别
    const dealMenuList = (data: Array<object>) => {
        let tree = [
            {
                menuName: '顶级菜单',
                menuId: '-1',
                children: [...data]
            }
        ]
        setTreeData(tree)
    }

    //提交表单
    const onFinish = async () => {
        form.validateFields().then(async values => {
            try{
                let itemInfo = {...info,...values,...infoForm};
                if(itemInfo.menuId){
                    updateInfo(itemInfo)
                }else{
                    addInfo(itemInfo)
                }
                message.success('操作成功');
                form.resetFields();
                props.submit();
            }finally{}
        }).catch(info => {
            console.log('Validate Failed - ', info);
        });
    }

    //选择父级
    const changeTree = (value: string) => {
        setInfoForm({ ...infoForm, parentId: value });
    }
    //操作 单选
    const changeType = (e: any, key: string) => {
        let { value } = e.target;
        setInfoForm({ ...infoForm, [key]: value });
    }
    //选择icon
    const selectIcon = (item: IIconList) => {
        let { value } = item;
        setInfoForm({ ...infoForm, icon: value });
    }
    //图标列表 
    const MenuIconContent = () => {
        let iconList = getIconList();
        return (
            <div style={{ width: 400 }}>
                {
                    iconList.map((icon, index) => {
                        return <IconSvg onClick={() => selectIcon(icon)} style={{ margin: '10px', cursor: 'pointer' }} name={icon.value} key={index} />
                    })
                }
            </div>
        )
    }
    return (
        <ShowDrawer
            title="菜单信息"
            size={450}
            close={() => props.close()}
            submit={() => onFinish()}>
            <Form
                form={form}
                name="info"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                initialValues={{ remember: false }}
                onFinish={onFinish}
                autoComplete="off"
            >
                <Form.Item label="菜单名称" initialValue={infoForm.menuName} name="menuName" rules={rules.menuName}>
                    <Input placeholder="请输入菜单名称" />
                </Form.Item>
                <Form.Item label="菜单类型" initialValue={infoForm.menuType} name="menuType" rules={rules.menuType}>
                    <Radio.Group onChange={e => changeType(e, 'menuType')} value={infoForm.menuType}>
                        {
                            menuTypes.map(item => {
                                return <Radio value={item.value} key={item.value}>{item.label}</Radio>
                            })
                        }
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="上级菜单" initialValue={infoForm.parentId} name="parentId">
                    <TreeSelect
                        style={{ width: '100%' }}
                        value={infoForm.parentId}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择上级菜单"
                        allowClear
                        onChange={changeTree}
                        treeData={treeData}
                        fieldNames={fieldNames} />
                </Form.Item>
                {
                    infoForm.menuType != 'F' && (
                        <Form.Item label="菜单图标" initialValue={infoForm.icon} name="icon">
                            <Popover
                                content={<MenuIconContent />}
                                title=""
                                placement="bottom"
                                trigger="click"
                            >
                                <Input addonBefore={<IconSvg name={infoForm.icon || ''} />} className='flex_item' placeholder="请选择菜单图标" />
                            </Popover>
                        </Form.Item>
                    )
                }
                {
                    infoForm.menuType != 'C' && (
                        <Form.Item label="权限名称" initialValue={infoForm.path} name="path" rules={rules.path}>
                            <Input placeholder="请输入权限名称" />
                        </Form.Item>
                    )
                }
                <Form.Item label="开放租户" initialValue={infoForm.isUniq} name="isUniq">
                    <Radio.Group onChange={e => changeType(e, 'isUniq')} value={infoForm.isUniq}>
                        {
                            isSuperTypes.map(item => {
                                return <Radio value={item.value} key={item.value}>{item.label}</Radio>
                            })
                        }
                    </Radio.Group>
                </Form.Item>
                {
                    infoForm.menuType == 'C' && (
                        <Form.Item label="路径" initialValue={infoForm.path} name="path">
                            <Select showSearch placeholder="请选择文件路径">
                                {
                                    menuList.map(item => {
                                        return <Option value={item.value} key={item.value} label={item.name} children={undefined}></Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                    )
                }
                <Form.Item label="排序" initialValue={infoForm.orderNum} name="orderNum">
                    <InputNumber className='form_item' style={{ width: '100%' }} min={0} precision={0} placeholder="请输入备注" />
                </Form.Item>
            </Form>
        </ShowDrawer>
    )
}
